<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>颜色规范</title>
<link rel="stylesheet" href="css/basics.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>

	<article class="demo-box">
		<h1>颜色</h1>
		<hr>

		<ul class="demo-list">
			<li style="background-color: #009688;">
				<p>#009688</p>
				<p>修饰元素</p>
			</li>
			<li style="background-color: #5fb878;">
				<p>#5fb878</p>
				<p>修饰元素(选中)</p>
			</li>
			<li style="background-color: #393d49;">
				<p>#393d49</p>
				<p>深色导航</p>
			</li>
			<li style="background-color: #f7b824;">
				<p>#f7b824</p>
				<p>提示性元素(暖色)</p>
			</li>
			<li style="background-color: #01aaed;">
				<p>#01aaed</p>
				<p>链接文本</p>
			</li>
			<li style="background-color: #fa9019;">
				<p>#fa9019</p>
				<p>链接文本(暖色)</p>
			</li>
			<li style="background-color: #3a3a3a;">
				<p>#3a3a3a</p>
				<p>一级文字</p>
			</li>
			<li style="background-color: #636363;">
				<p>#636363</p>
				<p>二级文字</p>
			</li>
			<li style="background-color: #b0b0b0;">
				<p>#b0b0b0</p>
				<p>三级文字</p>
			</li>
			<li style="background-color: #e0e0e0;">
				<p>#e0e0e0</p>
				<p>辅助文字</p>
			</li>
			<li style="background-color: #edeef1;">
				<p>##edeef1</p>
				<p>背景颜色</p>
			</li>
			<li style="background-color: #ff5722;">
				<p>#ff5722</p>
				<p>警示颜色</p>
			</li>
		</ul>

		<ul class="demo-list">
			<li style="background-color: #52a7f9;">
				<p>#52a7f9</p>
			</li>
			<li style="background-color: #fb4912;">
				<p>#fb4912</p>
			</li>
			<li style="background-color: #6fc041;">
				<p>#6fc041</p>
			</li>
			<li style="background-color: #885bb2;">
				<p>#885bb2</p>
			</li>
			<li style="background-color: #ef941a;">
				<p>#ef941a</p>
			</li>
			<li style="background-color: #2a5775;">
				<p>#2a5775</p>
			</li>
		</ul>

		<!-- 背景边框 -->
		<ul class="demo-list demo-necolor">
			<li style="background-color: #fbfbfb;">
				<p>#fbfbfb</p>
			</li>
			<li style="background-color: #f2f2f2;">
				<p>#f2f2f2</p>
			</li>
			<li style="background-color: #eeeeee;">
				<p>#eeeeee</p>
			</li>
			<li style="background-color: #e2e2e2;">
				<p>#e2e2e2</p>
			</li>
			<li style="background-color: #dddddd;">
				<p>#dddddd</p>
			</li>
			<li style="background-color: #d2d2d2;">
				<p>#d2d2d2</p>
			</li>
			<li style="background-color: #c2c2c2;">
				<p>#c2c2c2</p>
			</li>
		</ul>
	</article>

	<article class="demo-box">
		<h1>字体</h1>
		<hr>

		<ul class="demo-font yahei">
			<li>
				<p style="font-size: 30px">微软雅黑 Microsoft YaHei 30px</p>
			</li>
			<li>
				<p style="font-size: 24px">微软雅黑 Microsoft YaHei 24px</p>
			</li>
			<li>
				<p style="font-size: 18px">微软雅黑 Microsoft YaHei 18px</p>
			</li>
			<li>
				<p style="font-size: 14px">微软雅黑 Microsoft YaHei 14px</p>
			</li>
			<li>
				<p style="font-size: 12px">微软雅黑 Microsoft YaHei 12px</p>
			</li>
		</ul>
		<ul class="demo-font verdana">
			<li>
				<p style="font-size: 30px">Verdana 30px</p>
			</li>
			<li>
				<p style="font-size: 24px">Verdana 24px</p>
			</li>
			<li>
				<p style="font-size: 18px">Verdana 18px</p>
			</li>
			<li>
				<p style="font-size: 14px">Verdana 14px</p>
			</li>
			<li>
				<p style="font-size: 12px">Verdana 12px</p>
			</li>
		</ul>
	</article>

</body>
</html>
